<template>
    <div>
        <div class="detail-row" v-for="(rowItem, rowIndex) in detailFields" :key="rowIndex">
            <el-tooltip
                v-for="(item, index) in rowItem"
                :key="index"
                :disabled="isShowTooltip"
                placement="top"
                :content="item.needFormat ? item.formatter(instructionInfo[item.id], instructionInfo) : String(instructionInfo[item.id])"
            >
                <span @mouseover="onMouseOver(item.id)" :key="item.id">
                    <span :id="item.id" :key="item.id"
                        >{{ item.content + '：' }}
                        <!-- <span style="color: blue" v-if="!noData">{{
                            item.needFormat
                                ? item.formatter(instructionInfo[item.id], instructionInfo)
                                : instructionInfo[item.id] === 0 || instructionInfo[item.id]
                                ? instructionInfo[item.id]
                                : '--'
                        }}</span> -->
                        <span style="color: blue" v-if="!noData">{{
                            item.needFormat ? item.formatter(instructionInfo[item.id], instructionInfo) : formatterContent(instructionInfo[item.id])
                        }}</span>
                        <span v-else></span>
                    </span>
                </span>
            </el-tooltip>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
    name: 'InstructionDetail',
})
// 指令明细组件
export default class InstructionDetail extends Vue {
    @Prop()
    detailFields: any[]; // 指令明细字段
    @Prop()
    instructionInfo: any; // 指令信息
    @Prop()
    noData: boolean; // 是否有数据
    isShowTooltip: boolean = false; // 是否显示文字提示

    formatterContent(content: any) {
        if (content === 0) {
            return content;
        } else if (content && String(content).trim()) {
            return content;
        } else {
            return '--';
        }
    }

    onMouseOver(str: any) {
        // 内容超出，显示文字提示内容
        // const tag: any = this.$refs[str];
        const tag: any = document.getElementById(str);
        const parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度
        const contentWidth = tag.offsetWidth; // 获取元素可视宽度
        this.isShowTooltip = contentWidth <= parentWidth;
    }
}
</script>
<style lang="scss" scoped>
.detail-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    padding: 5px 0;
    width: 135%;
    > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
